<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>手机绑定</title>
    <!-- zui -->
    <link rel="stylesheet" type="text/css" href="../css/normalize.css">
    <link rel="stylesheet" type="text/css" href="../css/zui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/doc.min.css">
    <style type="text/css">
    	body{background: #f3f3f3}
    	header{background: #ef673c;color: #fff}
    	h2{margin: 0;padding: .5em 0;}
    	.icon-arrow-left{font-size: inherit;}
    	.input-group{width: 100%}
    	.form-control:focus{border-color:#ccc;box-shadow:none;}
    	.btn{width: 100%;border-radius: 0;border:0;background: #ef673c;color: #fff;padding: .5em 0}
		.btn:focus,.btn:active{border:0;background: #ef673c;color: #fff;box-shadow: none;}

		.input-group{background: #fff;padding: .4em 0}
		.input-group-addon{background: transparent;border:0 none;color: #666}
		.icon-mobile{padding-right: 1em}
		.form-control{border: 0 none;box-shadow: none;}
    </style>
</head>
<body class="hidden-md hidden-lg">
	<header class="clearfix">
		<div class="col-xs-2">
			<h2><i class="icon icon-arrow-left"></i></h2>
		</div>
		<div class="col-xs-8 text-center"><h2>手机绑定</h2></div>
	</header>
	<div class="sure-number">
		<div class="container">
			<div class="row" style="line-height:3em">
				<div class="col-xs-12">已绑账号152*****970</div>
			</div>
			<div class="row">
				<div class="input-group">
				  	<input type="number" class="form-control old-number" placeholder="输入当前绑定的完整手机号">
				</div>
			</div>
			<div class="row" style="margin-top:10%">
				<button class="btn btn-block disabled " type="button">下一步</button>
			</div>
		</div>
	</div>	
	<div class="new-number" style="display:none">
		<div class="container">
			<div class="row" style="border-bottom:1px solid #f3f3f3">
				<div class="input-group">
				  	<input type="number" class="form-control old-number" placeholder="输入新的手机号">
				</div>
			</div>
			<div class="row">
				<div class="input-group">
					<input type="text" class="form-control" placeholder="请输入4位数验证码">
					<span class="input-group-addon"><i class="icon icon-mobile"></i><span>发送验证码</span></span>
				</div>
			</div>
			<div class="row" style="margin-top:10%">
				<button class="btn btn-block disabled " type="button">保存</button>
			</div>
		</div>
	</div>
	<div class="change-number"></div>
	<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//判断手机号是否正确&&按钮是否被激活
			var oldNumber = '15238619970';
			$('.old-number').bind('input propertychange',function(){
				if($(this).val().length > 11){
					$(this).val($(this).val().substring(0,11));
				}
				if($(this).val() == oldNumber){
					$('button').eq(0).removeClass('disabled');
				}else{
					$('button').eq(0).addClass('disabled');
				}
			});
			//下一步
			$('button').eq(0).click(function(){
				$('.sure-number').hide();
				$('.new-number').show();
			});
			//按钮是否被激活
			$('.new-number input').each(function(){
				$(this).bind('input propertychange',function(){
					if($('input')[1].value != '' && $('input')[2].value != ''){
						$('button').eq(1).removeClass('disabled');
					}else{
						$('button').eq(1).addClass('disabled');
					}
				})
			})
			//返回
			$('.icon-arrow-left').click(function(){
				$('.wrapper', parent.document).show();
				$('iframe', parent.document).hide();
			})
			
			//保存
			$('button').eq(1).click(function(){
				var num = $('input[type="number"]').eq(1).val();
				var newnum = num.replace(/\d{1}(?=[\d\D]{3,7}$)/ig,'*');
				$('#new_phone', parent.document).html(newnum);
				console.log(num)
				console.log(newnum)
				$('.wrapper', parent.document).show();
				$('iframe', parent.document).hide();
			})
		});

	</script>
</body>
</html>